<template>
  <Card :bordered="false" dis-hover>
    <Row>
      <i-col span="6">
        <Card style="minHeight:590px;" :bordered="false" dis-hover>
          <Form :model="formTop" label-position="top">
            <FormItem label="选择业务树形">
              <Select v-model="formTop.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
          </Form>

          <Tabs value="name1">
            <TabPane label="所有分组" name="name1">
              <CarTreeList></CarTreeList>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="18">
        <Card class="car-group-warp" :bordered="false" dis-hover>
          <Form :model="formItem" :label-width="80" style="width:500px;" class="car-group-form">
            <FormItem label="组名">
              <Input v-model="formItem.input" placeholder />
            </FormItem>
            <FormItem label="分组类型">
              <CheckboxGroup v-model="formItem.checkbox">
                <Checkbox label="中间分组"></Checkbox>
                <Checkbox label="邦车分组"></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem label="组名描述">
              <Input
                v-model="formItem.textarea"
                type="textarea"
                :autosize="{minRows: 2,maxRows: 5}"
                placeholder
              />
            </FormItem>
            <FormItem>
              <Button type="primary">新建子分组</Button>
              <Button style="margin-left: 10px">保存</Button>
              <Button type="primary" style="margin-left: 10px">新建分组</Button>
            </FormItem>
          </Form>
        </Card>
      </i-col>
    </Row>
  </Card>
</template>

<script>
import CarTreeList from "@/components/CarTreeList.vue";
import columns1 from "@/config/bindCar.js";
export default {
  name: "CarGroup",
  components: {
    CarTreeList,
  },
  data() {
    return {
      formItem: {
        input: "",
        checkbox: [],
        textarea: "",
      },
      formTop: {
        select: "",
      },
      columns1: columns1,
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
};
</script>

<style>
.mg-left-10 {
  margin-left: 10px;
}
.car-group-warp{
    min-height: 590px;
    text-align: center;
}
.car-group-form{
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>